<template>
	<view :style="{
		position: position
	}" :class="['rh-btn-container', className]">
		<u-button class="rh-submit-btn" :color="color" :text="btnTxt" @click="submit" :loading="submit_loading"></u-button>
	</view>
</template>

<script>
	export default {
		props: {
			text: String,
			className: {
				type: String,
				default: () => ''
			},
			color: {
				type: String,
				default: () => '#0003AA'
			},
			position: {
				type: String,
				default: () => 'fixed'
			},
			submitAction: Function
		},
		computed: {
			btnTxt(){
				return this.text
			},
		},
		data() {
			return {
				submit_loading: false,
			};
		},
		methods: {
			async submit(){
				let _self = this
				if(_self.submitAction){
					_self.submit_loading = true
					_self.submitAction().finally(() => {
						_self.submit_loading = false
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.rh-btn-container{
		bottom: 60rpx;
		left: 0;
		right: 0;
		z-index: 990;
		&.special{
			left: 120rpx;
			right: 120rpx;
		}
		.rh-submit-btn{
			
		}
	}
</style>
